<template>
	<!-- 头部 -->
	<div id="header">
		<div class="content">
			<div id="a">
				<img src="../assets/logo.png" alt="加载失败" />
				<el-divider direction="vertical" id="a_a"></el-divider>
				<span id="a_b">导游在线考试系统</span>
			</div>
			<div id="d" >
				<el-avatar :size="50" :src="this.avatar" @error="errorHandler"></el-avatar>
				<ul id="b_b" hidden style="z-index:999">
					<li :class="[this.path == '/mines' ? 'headerB' : '']"><router-link to="/mines">个人信息</router-link></li>
					<li :class="[this.path == '/edit' ? 'headerB' : '']"><router-link to="/edit">修改密码</router-link></li>
					<li :class="[this.path == '/about' ? 'headerB' : '']"><router-link to="/about">关于我们</router-link></li>
					<li @click="logout"  @mouseover="imgOver"  @mouseleave="imgOut">退出</li>
				</ul>
			</div>
			<div id="c" @click="news">
				<img src="../assets/notice.png" alt="AAA" />
				<div v-if="this.$store.state.read > 0">{{ this.$store.state.read }}</div>
			</div>
			<div id="b">
				<ul>
					<li
						class="b_a"
						:class="[
							(this.path == '/' ? 'headerA' : '') ||
								(this.path == '/compMock' ? 'headerA' : '') ||
								(this.path == '/finalQues/finalQues' ? 'headerA' : '') ||
								(this.path == '/wrongOrColl' ? 'headerA' : '') ||
								(this.path == '/collect' ? 'headerA' : '') ||
								(this.path == '/dailyPractice' ? 'headerA' : '')
						]"
					>
						<router-link to="/">首页</router-link>
					</li>
					<li class="b_a" :class="[this.path == '/onlinepractice' ? 'headerA' : '']"><router-link to="/onlinepractice">在线练习</router-link></li>
					<li class="b_a" :class="[this.path == '/onlineexam' ? 'headerA' : '']"><router-link to="/onlineexam">在线考试</router-link></li>
					<li class="b_a" :class="[(this.path == '/course' ? 'headerA' : '') || (this.path == '/courseDetail' ? 'headerA' : '')]">
						<router-link to="/course">小凡学院</router-link>
					</li>
					<li id="sub_menu">
						<a>
							在线统计 &nbsp;&nbsp;&nbsp;
							<img src="../assets/menu_sub.png" alt="加载失败" style="display: inline" />
						</a>
						<ul id="b_b" hidden style="z-index:999">
							<li :class="[this.path == '/scoreAnalysis' ? 'headerB' : '']"><router-link to="/scoreAnalysis">成绩分析</router-link></li>
							<li :class="[this.path == '/leaderboard' ? 'headerB' : '']"><router-link to="/leaderboard">排行榜</router-link></li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script scoped>
export default {
	name: 'topNav',
	data() {
		return {
			activeIndex: '1',
			activeIndex2: '1',
			path: this.$route.path,
			avatar: ''
		};
	},
	created() {
		this.getCookies();
		this.getMineInfo();
		this.getRead();
	},
	watch: {
		$route() {
			this.path = this.$route.path;
		}
	},
	methods: {
		//存储未读消息数量
		addRead() {
			this.$store.commit('isRead', this.read);
		},
		handleSelect(key, keyPath) {
			console.log(key, keyPath);
		},
		errorHandler() {
			return true;
		},
		news() {
			this.$router.push('/news');
		},
		imgOver(){
			this.refresh.clickDis = false
		},
		imgOut(){
			this.refresh.clickDis = true
		},
		logout() {
			this.axios.post(`/base/logout`, {}).then( res => {
				//清除cookies
			document.cookie = "stuToken=0;expires=" + new Date().toUTCString();
                  // window.location.href = 'http://localhost:8083/'
                  window.location.href = res
      })
		},
		getMineInfo() {
			this.axios.get(`/web/student/student/mine/getMineInfoVO`, {}).then(res => {
				this.avatar = res.avatar;
			});
		},
		getRead() {
			this.axios.get('/web/student/home/GetHotAndNewVideo').then(res => {
				this.read = res.read;
				this.addRead();
			});
		},
		getCookies(){
			let token = document.cookie
			if(!token){
				this.logout()
			}
		}
	}
};
</script>
